<script setup lang="ts">
import {ref} from "vue";
import dayjs from "dayjs";
import { FieldTimeOutlined, EyeOutlined } from '@ant-design/icons-vue'
import {useRequest} from "vue-hooks-plus";
import {postNoteQueryNoteByNoteAbout} from "@/apis/student/modules/note";

// 获取最近编辑的数据
const recentEditsList = ref<any>([])
updateNoteData()
function updateNoteData(){
  postNoteQueryNoteByNoteAbout({
    type: "update"
  }).then((res)=>{
    recentEditsList.value = res.data
  }).catch((err)=>{
    console.log(err)
  })
}

function viewNoteData(){
  postNoteQueryNoteByNoteAbout({
    type: "view"
  }).then((res)=>{
    recentEditsList.value = res.data
  }).catch((err)=>{
    console.log(err)
  })
}
</script>

<template>
  <div>
  <a-button-group>
    <a-button type="link" @click="updateNoteData()">
      <template #icon>
        <FieldTimeOutlined />
      </template>
      最新编辑
    </a-button>
    <a-button type="link" @click="viewNoteData()">
      <template #icon>
        <EyeOutlined />
      </template>
      最近浏览
    </a-button>
  </a-button-group>
  <a-list >
    <a-list-item class="list-item-head">
        <span>名称</span>
        <span>创建时间</span>
        <span>编辑时间</span>
    </a-list-item>
    <a-list-item v-for="i in recentEditsList" :key="i" class="hover-pointer hover">
      <span>{{i.noteName}}</span>
      <span>{{dayjs(i.creatTime).format('YYYY-MM-DD HH:mm:ss')}}</span>
      <span>{{dayjs(i.updataTime).format('YYYY-MM-DD HH:mm:ss')}}</span>
    </a-list-item>
  </a-list>
  </div>
</template>

<style scoped lang="scss">
.switch-ul{
  width: 10rem;
  height: 2.7rem;
  display: flex;
  background: #DEDEDE;
}
.list-item-head{
  font-weight: bold;
  font-size: 1rem;
  background: #f3f3f5;
}
.hover{
  &:hover{
    background: #f5f5f5;
  }
  &:active{
    background: #f2f2f2;
  }
}
</style>
